<template>
  <div id="container"></div>
</template>

<script>
export default {
  name: '',
  data() {
    return {}
  },
  mounted() {
    // 01: 创建地图实例
    var map = new BMapGL.Map('container')
    //02: 设置中心点坐标
    var point = new BMapGL.Point(116.404, 39.915)
    //03:地图初始化，同时设置地图展示级别
    map.centerAndZoom(point, 15)
    //设置地图类型为地球模式
    //map.setMapType(BMAP_EARTH_MAP)
    // 允许滚轮缩放
    // map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
    // map.setHeading(64.5) //设置地图旋转角度
    // map.setTilt(73) //设置地图的倾斜角度

    // 创建点标记
    var marker = new BMapGL.Marker(point)
    map.addOverlay(marker)
    // 创建信息窗口
    var opts = {
      width: 200,
      height: 100,
      title: '故宫博物院'
    }
    var infoWindow = new BMapGL.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts)
    // 点标记添加点击事件
    marker.addEventListener('click', function () {
      map.openInfoWindow(infoWindow, point) // 开启信息窗口
    })
  }
}
</script>
<style scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>